<script lang="ts" setup>
</script>

<template>
  <div class="layout_logo">
    <img src="/favicon.ico">
    <p>小七泡泡屋</p>
  </div>
</template>

<style lang="scss" scoped>
.layout_logo {
  cursor: pointer;
  position: absolute;
  height: 70px;
  width: inherit;
  display: flex;
  align-items: center;
  background-color: transparent;
  justify-content: center;

  & * {
    padding: 0 5px;
  }

  img {
    width: 40px;
    height: 40px;
  }

  &:hover img {
    animation: rotation .8s linear infinite;
  }

  @keyframes rotation {
    0% {
      transform: rotate(0);
    }

    50% {
      transform: rotate(180deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  p {
    font-size: 24px;
    font-weight: 700;
    font-style: italic;

  }
}
</style>